<template>
	<div>
	  <div class="ratings" ref="ratings">
	    <div class="ratings-content">
	    	<div class="foods-wrapper" ref="foodsWrapper">
	            <ul>
	              <li v-for="food in selectFoods" v-show="food.count>0" class="food-item border-1px">
	                <div class="icon">
	                  <img width="72" height="72" :src="food.picUrl">
	                </div>
	                <div class="content">
	                  <h2 class="name">{{food.productName}}</h2>
	                  <p class="desc">套餐搭配：</p>
	                  <div class="extra">
	                    <span class="count" v-show="!food.specNameList||food.count==0">{{food.productDetails}}</span>
                        <span class="count" v-show="food.specNameList && food.count>0">{{food.specNameList}}</span>
	                  </div>
	                  <div class="price">
	                    <span class="now"><span class="smallrmb">￥</span>{{food.productPrice}}</span>
	                  </div>
	                  <div class="cartcontrol-wrapper">
		                  <cartcontrol @add="addFood" :food="food"></cartcontrol>
		                </div>
	                </div>
	              </li>
	            </ul>
	      </div>
	    </div>
	  </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  import {formatDate} from 'common/js/date';
  import shopcart from 'components/shopcart/shopcart';
  import ratingselect from 'components/ratingselect/ratingselect';
  import split from 'components/split/split';
  import cartcontrol from 'components/cartcontrol/cartcontrol';
  import Bus from 'common/js/bus.js'
  const ALL = 2;

  export default {
    props: {

    },
    data() {
      return {
      	goods: [],
        ratings: [],
        listHeight: [],
        scrollY: 0,
        selectType: ALL,
        onlyContent: true,
         balls: [
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          }
        ],
        dropBalls: [],
        selectFoods:[]
      };
    },
    computed: {
    },
    created() {
    	Bus.$on('getTarget', target => {
            this.addFood(target);
        });
	    Bus.$on('getselectFoods', selectFoods => {
	          this.selectFoods = selectFoods;
	    });
    },
    methods: {
       addFood(target) {
        this.drop(target);
      },
       _initScroll() {
      	this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
         	click: !this.foodsScroll
        });
      },
      drop(el) {
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i];
        }
      },
       beforeDrop(el) {
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
        }
      },
    },
    components: {
      split,
      ratingselect,
      cartcontrol
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
    .ball-container
      .ball
        position: fixed
        left: 32px
        bottom: 22px
        z-index: 200
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: #e78a3d
          transition: all 0.4s linear


	.ratings-content
    display: flex
    position: absolute
    top: 0
    bottom: 48px
    width: 100%
    overflow: hidden


  .ratings
    position: absolute
    top: 220px
    bottom: 0
    left: 0
    width: 100%
    overflow: hidden
    .overview
      display: flex
      padding: 18px 0
      .overview-left
        flex: 0 0 137px
        padding: 6px 0
        width: 137px
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        text-align: center
        @media only screen and (max-width: 320px)
          flex: 0 0 120px
          width: 120px
        .score
          margin-bottom: 6px
          line-height: 28px
          font-size: 24px
          color: rgb(255, 153, 0)
        .title
          margin-bottom: 8px
          line-height: 12px
          font-size: 12px
          color: rgb(7, 17, 27)
        .rank
          line-height: 10px
          font-size: 10px
          color: rgb(147, 153, 159)
      .overview-right
        flex: 1
        padding: 6px 0 6px 24px
        @media only screen and (max-width: 320px)
          padding-left: 6px
        .score-wrapper
          margin-bottom: 8px
          font-size: 0
          .title
            display: inline-block
            line-height: 18px
            vertical-align: top
            font-size: 12px
            color: rgb(7, 17, 27)
          .star
            display: inline-block
            margin: 0 12px
            vertical-align: top
          .score
            display: inline-block
            line-height: 18px
            vertical-align: top
            font-size: 12px
            color: rgb(255, 153, 0)
        .delivery-wrapper
          font-size: 0
          .title
            line-height: 18px
            font-size: 12px
            color: rgb(7, 17, 27)
          .delivery
            margin-left: 12px
            font-size: 12px
            color: rgb(147, 153, 159)
    .rating-wrapper
      padding: 0 18px
      .rating-item
        display: flex
        padding: 18px 0
        border-1px(rgba(7, 17, 27, 0.1))
        .avatar
          flex: 0 0 28px
          width: 28px
          margin-right: 12px
          img
            border-radius: 50%
        .content
          position: relative
          flex: 1
          .name
            margin-bottom: 4px
            line-height: 12px
            font-size: 10px
            color: rgb(7, 17, 27)
          .star-wrapper
            margin-bottom: 6px
            font-size: 0
            .star
              display: inline-block
              margin-right: 6px
              vertical-align: top
            .delivery
              display: inline-block
              vertical-align: top
              line-height: 12px
              font-size: 10px
              color: rgb(147, 153, 159)
          .text
            margin-bottom: 8px
            line-height: 18px
            color: rgb(7, 17, 27)
            font-size: 12px
          .recommend
            line-height: 16px
            font-size: 0
            .icon-thumb_up, .item
              display: inline-block
              margin: 0 8px 4px 0
              font-size: 9px
            .icon-thumb_up
              color: rgb(0, 160, 220)
            .item
              padding: 0 6px
              border: 1px solid rgba(7, 17, 27, 0.1)
              border-radius: 1px
              color: rgb(147, 153, 159)
              background: #fff
          .time
            position: absolute
            top: 0
            right: 0
            line-height: 12px
            font-size: 10px
            color: rgb(147, 153, 159)

    .foods-wrapper
      flex: 1
      .title
        padding-left: 14px
        height: 26px
        line-height: 26px
        border-left: 2px solid #d9dde1
        font-size: 12px
        color: rgb(147, 153, 159)
        background: #f3f5f7
      .food-item
        display: flex
        margin: 12px 4px 12px 12px
        padding-bottom: 8px
        border-1px(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
          margin-bottom: 0
        .icon
          flex: 0 0 72px
          margin-right: 10px
        .content
          flex: 1
          .name
            margin: 2px 0 4px 0
            height: 14px
            line-height: 14px
            font-size: 14px
            color: #323232
          .desc, .extra
            line-height: 10px
            font-size: 10px
            color: rgb(147, 153, 159)
          .desc
            line-height: 12px
            margin-bottom: 4px
          .extra
            .count
              margin-right: 12px
          .price
            font-weight: 700
            line-height: 24px
            .now
              margin-right: 8px
              font-size: 18px
              color: #e68a3f
            .old
              text-decoration: line-through
              font-size: 10px
              color: rgb(147, 153, 159)
          .cartcontrol-wrapper
            position: absolute
            right: 10px
            bottom: 13px
</style>
